/*
  学习目标：useEffect- 提供生命周期- 
  挂载后: useEffect(() =>{}, [])
  更新后: useEffect(() =>{}, [依赖项])
*/
import React from "react";
import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  // useEffect(() => {
  //   console.log("每次数据变化 我都会执行  ----->  ", count);
  //   document.title = count;
  //   // [] 代表挂载后, 只会执行一次
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, []);

  useEffect(() => {
    console.log("每次数据变化 我都会执行  ----->  ", count);
    document.title = count;
    // [依赖项] 代表: 挂载 更新, 二合一
    // 等同于 componentDidMount和 componentDidUpdate 二合一
    // 类似: vue中的watch , 开启immediately
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
